<script setup lang="ts">
import { ref } from 'vue'
const tabsIndex = ref<string | number>('0')
</script>
<template>
  <div
    class="clock-setting-window w-full h-full bg-[#fcf9f9] p-2 overflow-hidden flex flex-col gap-2"
  >
    <header-bar />
    <el-card class="flex-1 border-0 p-3 bg-[red]" stretch :body-style="{ padding: '0' }">
      <el-tabs v-model="tabsIndex" tab-position="top" class="h-full !border-0">
        <el-tab-pane label="设置" name="0">
          <setting-form />
        </el-tab-pane>
        <el-tab-pane label="开发工具快捷键" name="1">
          <dev-shots-key />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <versions />
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card) {
  .el-card__body {
    @apply h-full;
  }
  .el-tabs {
    @apply flex flex-col;
    .el-tabs__content {
      @apply flex-1;
      .el-tab-pane {
        @apply h-full overflow-hidden;
      }
    }
  }
}
</style>
